<template>
  <div>
    <Row>
      <Col span="24">
        <Tabs v-model:activeKey="activeKey">
          <TabPane :tab="t('routes.components.permissionModal.user')" key="1">
            <BasicTable @register="registerTable" :rowSelection="{ type: 'checkbox' }" />
          </TabPane>
          <TabPane :tab="t('routes.components.permissionModal.depPart')" key="2">
            <div style="height: 100%; overflow-y: scroll; overflow-x: hidden">
              <BasicTree
                checkable
                :treeData="departData"
                :toolbar="true"
                :search="true"
                :title="t('routes.components.permissionModal.depPart')"
              />
            </div>
          </TabPane>
          <TabPane :tab="t('routes.components.permissionModal.role')" key="3">
            <div style="height: 100%; overflow-y: scroll; overflow-x: hidden">
              <BasicTree
                checkable
                :treeData="roleData"
                :toolbar="true"
                :search="true"
                :title="t('routes.components.permissionModal.role')"
              />
            </div>
          </TabPane>
        </Tabs>
      </Col>
    </Row>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Row, Col, Tabs, TabPane } from 'ant-design-vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { BasicTree } from '/@/components/Tree/index';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { getUserColumns } from './tableData';

  const { t } = useI18n();
  const activeKey = ref('1');
  const departData = ref([
    {
      title: 'parent 1',
      key: '0-0',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '0-0-0' },
        {
          title: 'leaf',
          key: '0-0-1',
          children: [
            { title: 'leaf', key: '0-0-0-0' },
            { title: 'leaf', key: '0-0-0-1' },
          ],
        },
      ],
    },
    {
      title: 'parent 2',
      key: '1-1',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '1-1-0' },
        { title: 'leaf', key: '1-1-1' },
      ],
    },
    {
      title: 'parent 3',
      key: '2-2',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '2-2-0' },
        { title: 'leaf', key: '2-2-1' },
      ],
    },
  ]);
  const roleData = ref([
    {
      title: 'parent 1',
      key: '0-0',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '0-0-0' },
        {
          title: 'leaf',
          key: '0-0-1',
          children: [
            { title: 'leaf', key: '0-0-0-0' },
            { title: 'leaf', key: '0-0-0-1' },
          ],
        },
      ],
    },
    {
      title: 'parent 2',
      key: '1-1',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '1-1-0' },
        { title: 'leaf', key: '1-1-1' },
      ],
    },
    {
      title: 'parent 3',
      key: '2-2',
      icon: 'home|svg',
      children: [
        { title: 'leaf', key: '2-2-0' },
        { title: 'leaf', key: '2-2-1' },
      ],
    },
  ]);

  // 用户表格初始化
  const [registerTable] = useTable({
    columns: getUserColumns(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: false, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    canResize: false,
  });
</script>

<style scoped></style>
